import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/advanced/scaffold_page.dart';
import 'package:flutter_demo/pages/custom/custom_paint_page.dart';
import 'package:flutter_demo/pages/page_with_title.dart';
import 'package:flutter_demo/widgets/app_widgets.dart';

import '../../conf/m3.dart';
import '../../generated/assets.dart';

class DialogPage extends PageWithTitle {
  const DialogPage({super.key}) : super("对话框(Dialog)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("对话框，用于在当前页面中断用户操作并执行一个临时任务，例如：加载中、提示用户未"
          "登录不能操作、选择器等等，与Android的设计差不多"),
      PrimaryHeaderLabelText(
        "showDialog",
        "通过调用此方法在当前页面上方显示构建的组件，通常构建的组件使用以下的对话框组件来构建统"
            "一样式",
      ),
      PrimaryHeaderLabelText(
        "AlertDialog",
        "警告对话框，显示一个由图标、标题、内容、操作按钮构成的对话框，常用于提示用户确认操作",
      ),
      PrimaryHeaderLabelText(
        "SimpleDialog",
        "简单对话框，一个由标题和选项按钮（SimpleDialogOption）构成的简单的选择对话框",
      ),
      PrimaryHeaderLabelText(
        "Dialog",
        "基础对话框，可通过Dialog.fullscreen构建全屏对话框，通过它我们可以在对话框内自定义显"
            "示的内容，保持边框样式统一",
      ),
      NoticeText("与Android一样，Flutter也支持底部抽屉弹窗和侧滑抽屉，参考BottomSheet、"
          "Drawer"),
      PageLink(ScaffoldPage()),
      AppSpacer.large,
      _AlertDialogExample(),
      UlItem("AlertDialog"),
      BodyText("警告对话框，由图标、标题、消息内容、操作按钮四部分组成，在所有应用中应该算是最"
          "常见的对话框样式了"),
      CategoryTitle("对话框样式"),
      NoticeText("对话框一般都是调整内容组件样式，为了保持统一基本不会去调整对话框样式"),
      PrimaryHeaderLabelText(
        "backgroundColor",
        "对话框背景色",
      ),
      PrimaryHeaderLabelText(
        "elevation",
        "对话框海拔高度",
      ),
      PrimaryHeaderLabelText(
        "shadowColor",
        "对话框阴影颜色",
      ),
      PrimaryHeaderLabelText(
        "insetPadding",
        "对话框与屏幕边距",
      ),
      PrimaryHeaderLabelText(
        "shape",
        "对话框边框效果",
      ),
      PrimaryHeaderLabelText(
        "alignment",
        "对话框在屏幕中对齐配置",
      ),
      CategoryTitle("内容样式"),
      NoticeText("警告对话框由icon、title、content、actionButtons四部分组成，组件并未强"
          "制要求使用Text，所以灵活性很高"),
      PrimaryHeaderLabelText(
        "icon",
        "图标，居于对话框中上位置",
      ),
      PrimaryHeaderLabelText(
        "iconPadding",
        "图标边距",
      ),
      PrimaryHeaderLabelText(
        "iconColor",
        "图标颜色，他是以外包IconTheme来实现局部图标主题定制而不是图像滤镜，所以icon需得是图"
            "标组件这个属性才能起作用",
      ),
      PrimaryHeaderLabelText(
        "title",
        "标题，位于icon下方，若有设置icon则标题会居中显示，否则默认靠左",
      ),
      PrimaryHeaderLabelText(
        "titlePadding",
        "标题边距",
      ),
      PrimaryHeaderLabelText(
        "titleTextStyle",
        "标题样式，外包一层DefaultTextStyle，影响标题中的文本组件默认样式，",
      ),
      PrimaryHeaderLabelText(
        "content contentPadding contentTextStyle",
        "内容文本，位于标题下方显示，与标题一样可以设备边距与样式",
      ),
      PrimaryHeaderLabelText(
        "actions actionsPadding actionsAlignment",
        "动作按钮，如取消、确认按钮等，要关闭对话框可以通过Navigator.pop来实现，位于内容下方"
            "显示，可以设置边距和对齐方式，默认靠右显示",
      ),
      PrimaryHeaderLabelText(
        "buttonPadding",
        "按钮组的边距设置",
      ),
      AppSpacer.large,
      _SampleDialogExample(),
      UlItem("SampleDialog"),
      BodyText("简易对话框，它的组成非常简单，只有标题和内容构成，如果需要操作按钮推荐使用警告"
          "对话框，简易对话框一般用于提供一个可选列表给用户选择"),
      CategoryTitle("对话框样式"),
      NoticeText("与警告对话框一样，也基本不会在组件这里单独调整"),
      CategoryTitle("内容样式"),
      PrimaryHeaderLabelText(
        "title titlePadding titleTextStyle",
        "标题组件，同警告对话框",
      ),
      PrimaryHeaderLabelText(
        "children contentPadding",
        "内容组件，这些组件以列表方式排布，可以设置外部边距，SimpleDialogOption用于快速构建"
            "列表项",
      ),
      AppSpacer.large,
      _DialogExample(),
      UlItem("Dialog"),
      BodyText("基础对话框，除了对话框样式，其它什么都没有，高度根据内容自适应，想放啥组件放啥"
          "组件"),
      PrimaryHeaderLabelText("Dialog.fullscreen", "构建一个全屏样式的对话框")
    ];
  }
}

class _AlertDialogExample extends StatelessWidget {
  const _AlertDialogExample();

  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: [
        FilledButton(
          onPressed: () {
            showDialog(
                context: context,
                builder: (context) {
                  return AlertDialog(
                    title: const Text("标题"),
                    content: const Text("内容..................................."
                        "......................................................"
                        "......................................................"
                        "......................................................"
                        "......................................................"
                        "......................................................"
                        "......................................................"),
                    actions: [
                      TextButton(
                        child: const Text("取消"),
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                      TextButton(
                        child: const Text("确定"),
                        onPressed: () {
                          Navigator.of(context).pop(true);
                        },
                      ),
                    ],
                  );
                });
          },
          child: const Text("showDefault"),
        ),
        FilledButton(
          onPressed: () {
            showDialog(
                context: context,
                builder: (context) {
                  return AlertDialog(
                    icon: const Icon(Icons.error, size: 80),
                    iconPadding: const EdgeInsetsDirectional.only(
                      top: M3.paddingL,
                    ),
                    iconColor: Theme.of(context).colorScheme.error,
                    title: const Text("警告"),
                    titleTextStyle: Theme.of(context).textTheme.titleLarge,
                    titlePadding: const EdgeInsetsDirectional.symmetric(
                      horizontal: M3.paddingL,
                    ),
                    content: const Text("网络请求超时，购票失败"),
                    contentTextStyle: Theme.of(context).textTheme.bodyMedium,
                    contentPadding: const EdgeInsetsDirectional.symmetric(
                      horizontal: M3.paddingL,
                      vertical: M3.paddingM,
                    ),
                    actions: [
                      OutlinedButton(
                        child: const Text("确定"),
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                    ],
                    actionsAlignment: MainAxisAlignment.center,
                  );
                });
          },
          child: const Text("showCustom"),
        ),
      ],
    );
  }
}

class _SampleDialogExample extends StatelessWidget {
  const _SampleDialogExample();

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        FilledButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) {
                return SimpleDialog(
                  title: const Text("请选择一个选项"),
                  children: List.generate(
                    4,
                    (index) {
                      return SimpleDialogOption(
                        onPressed: () =>
                            Navigator.of(context).pop("item$index"),
                        child: Text("item$index"),
                      );
                    },
                  ),
                );
              },
            ).then((value) {
              ScaffoldMessenger.of(context)
                  .showSnackBar(SnackBar(content: Text("选择了：$value")));
            });
          },
          child: const Text("showPicker"),
        ),
      ],
    );
  }
}

class _DialogExample extends StatelessWidget {
  const _DialogExample();

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        FilledButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) {
                return Dialog(
                  child: AspectRatio(
                    aspectRatio: 1,
                    child: ClipRRect(
                      borderRadius: M3.connerRadiusMedium,
                      child: Image.asset(
                        Assets.imagesBenxi,
                        fit: BoxFit.contain,
                      ),
                    ),
                  ),
                );
              },
            );
          },
          child: const Text("showImage"),
        ),
        FilledButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) {
                return const Dialog(
                  backgroundColor: Colors.transparent,
                  child: SizedBox(
                    width: 80,
                    height: 80,
                    child: CircleLoading(),
                  ),
                );
              },
            );
          },
          child: const Text("showLoading"),
        ),
      ],
    );
  }
}
